<style>
  .layui-table-body {
    height: 100% !important;
  }
</style>

<table id="demo" lay-filter="test" lay-data="{id: 'idTest'}"></table>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button id="add" class="layui-btn layui-btn-sm">添加</button>
  </div>
</script>

<script type="text/html" id="toolEventDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="{{$base_url}}/assets/layui/layui.js"></script>
<script>
  //单元格工具事件
  layui.use(["table", "laytpl", "jquery"], function () {
    var table = layui.table;
    var $ = layui.jquery;
    var laytpl = layui.laytpl;

    // laytpl.config({
    //   open: "<%",
    //   close: "%>",
    // });

    table.render({
      elem: "#demo",
      height: 312,
      url: "/admin/sys", //数据接口
      method: "post",
      page: true, //开启分页
      cols: [
        [
          //表头
          {
            field: "id",
            title: "ID",
            width: 80,
            sort: true,
            fixed: "left",
          },
          { field: "parent", title: "父级菜单", width: 80 },
          { field: "name", title: "菜单名", width: 177 },
          {
            field: "icon",
            title: "图标",
            width: 80,
          },
          { field: "path", title: "路径", width: 177 },
          { field: "sort", title: "排序", width: 80, sort: true },
          { title: "操作", width: 200, templet: "#toolEventDemo" },
        ],
      ],
      toolbar: "#toolbarDemo", //开启工具栏
    });

    //单元格工具事件
    table.on("tool(test)", function (obj) {
      // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
      console.log(layEvent);

      if (layEvent === "del") {
        //删除
        layer.confirm("确定删除吗？", function (index) {
          // 发送删除请求
          $.get(
            "/admin/sys/del/" + data.id,
            {},
            function (data, textStatus, jqXHR) {
              console.log(data);
              if (data.code == 1) {
                obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
                layer.close(index);
              }
            },
            "json"
          );

          // 向服务端发送删除请求，执行完毕后，可通过 reloadData 方法完成数据重载

          table.reloadData('idTest', {
            scrollPos: "fixed", // 保持滚动条位置不变 - v2.7.3 新增
          });
        });
      } else if (layEvent === "edit") {
        //编辑
        //do something

       layer.open({
          type: 2,
          title: "编辑",
          area: ["500px", "500px"],
          content: "/admin/sys/edit?id=" + data.id,
        });

        // 同步更新缓存对应的值
        // 该方法仅为前端层面的临时更新，在实际业务中需提交后端请求完成真实的数据更新。
        // obj.update({
        //   username: "123",
        //   title: "abc",
        // });
        // // 若需更新其他包含自定义模板并可能存在关联的列视图，可在第二个参数传入 true
        // obj.update(
        //   {
        //     username: "123",
        //   },
        //   true
        // ); // 注：参数二传入 true 功能为 v2.7.4 新增

        // 当发送后端请求成功后，可再通过 reloadData 方法完成数据重载
        table.reloadData("idTest", {});
      }
    });

    $("#add").click(function (e) {
      e.preventDefault();
      layer.open({
        type: 2,
        title: "添加",
        area: ["500px", "500px"],
        content: "/admin/sys/add",
      });
      
    });
  });
</script>
